<template>
  <el-row :gutter="20" style="padding: 20px">
    <el-col :span="6">
      <category @tree-node-click="treeNodeClick"></category>
    </el-col>
    <el-col :span="18">
      <div class="mod-config">
        <el-form :inline="true" size="mini" :model="queryParams" @keyup.enter.native="loadData()">
          <el-form-item label="分组名称">
            <el-input v-model="queryParams.categoryName" placeholder="请输入分组名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" icon="el-icon-search" @click="loadData()">搜索</el-button>
            <el-button type="primary" size="mini" icon="el-icon-c-scale-to-original" @click="showAllRelation()">
              展示全部
            </el-button>
            <el-button type="primary" size="mini" plain icon="el-icon-circle-plus-outline" @click="handleAdd()">新增
            </el-button>
            <el-button type="danger" size="mini" plain icon="el-icon-delete" @click="deleteHandle()"
                       :disabled="selections.length <= 0">批量删除
            </el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;"
        >
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="组名"></el-table-column>
          <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
          <el-table-column prop="remark" header-align="center" align="center" label="描述"></el-table-column>
          <el-table-column prop="icon" header-align="center" align="center" label="组图标">
            <template slot-scope="scope">
              <image-preview :src="scope.row.icon"></image-preview>
            </template>
          </el-table-column>
          <el-table-column prop="categoryPathName" header-align="center" align="center"
                           label="所属分类"></el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-paperclip" @click="relationHandle(scope.row.id)">关联
              </el-button>
              <el-button type="text" size="small" icon="el-icon-edit" @click="handleUpdate(scope.row.id)">修改
              </el-button>
              <el-button type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <attr-group-form ref="dataForm" @ok="loadData"></attr-group-form>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="loadData"
        />

        <attr-group-relation v-if="relationVisible" ref="relationForm" @ok="loadData"></attr-group-relation>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Category from '../../common/category.vue'
import AttrGroupForm from './attrGroupForm.vue'
import {findAttrGroup, deleteAttrGroup} from '@/api/product/attrGroup'
import icon from "element-ui/packages/icon";
import AttrGroupRelation from "@/views/product/attrGroup/attrGroupRelation.vue";
import {getCategoryPathById} from "@/api/product/category";

export default {
  computed: {
    icon() {
      return icon
    }
  },
  components: {AttrGroupRelation, Category, AttrGroupForm},
  props: {},
  data() {
    return {
      id: undefined,
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      dataList: [],
      categoryPath: [],
      dataListLoading: false,
      selections: [],
      relationVisible: false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    relationHandle(groupId) {
      this.relationVisible = true
      this.$nextTick(() => {
        this.$refs.relationForm.add(groupId)
      })
    },

    treeNodeClick(data, node, component) {
      if (node.level === 3) {
        getCategoryPathById(data.id).then(res => {
          if (res.success) {
            this.categoryPath = res.data.map(item => item.toString())
          }
        })
        this.queryParams.categoryId = data.id
        this.loadData()
      }
    },

    showAllRelation() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10
      }
      this.loadData()
    },

    loadData() {
      this.dataListLoading = true
      findAttrGroup(this.queryParams).then(res => {
        if (res.success) {
          this.dataList = res.data.records
          this.total = res.data.total
        }
        this.dataListLoading = false
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.selections = val
    },
    handleAdd() {
      this.$refs.dataForm.add(this.categoryPath)
    },
    handleUpdate(id) {
      this.$refs.dataForm.edit(id)
    },
    // 删除
    deleteHandle(id) {
      let ids = id ? [id] : this.selections.map((item) => {
        return item.id
      })
      this.$confirm(
        '确定删除选中的数据?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteAttrGroup(ids).then(res => {
          if (res.success) {
            this.$message.success("操作成功")
            this.loadData()
          }
        })
      })
    }
  }
}
</script>
<style scoped>
</style>
